@dragoshomner Can you please provide some inline commentary about the changes and what/how they work?

@dragoshomner Can you please provide some inline commentary about the changes and what/how they work?

@alloy I added a couple of commnets to make it more clear what I did. For short, I tried to simulate what we have in People App (PA). There, we a similar scenario, where we keep the variables passed to the query (sortBy and filterBy) in some React states, and we change their values when we receive an event (in this example is refetch function that sets the state).

As I mentioned in the chat, when we change any state, the app crashes because data is undefined in useFragment. We had the same issue in the example app as well, but I was able to "fix" it by removing some directives (@argumentDefinitions, @includes) and setting fist: 5 in examples/apollo-watch-fragments/src/TodoList.tsx. However, it's very fragile (as you see @include directive breaks it). I'm not able to fully understand what's happening, but this fragility increases exponentially in our app and it's impossible for me to figure out why. That's what we did in PA: https://office.visualstudio.com/Office/_git/1JS/pullrequest/2360178

The goal, as I mentioned during the Nova sync, is to migrate to duct-tape + pagination step-by-step, to reduce the risk. The first one is to replace the old nova compiler to duct-tape compiler in 1JS and make it work in TMP. I suppose that the old code should be compatible with both compilers (the only important change being that we removed the fragment interpolation). Then, the next step would be to use useRefetchableFragment and usePaginationFragment instead of the basic useFragment, but we are blocked on the first step.

Hope it helps for more context :)

@dragoshomner should we close this? Or was there something that hasn't been fixed yet?